<template>
    <v-card class="message-card" height="80vh" elevation="5">
                <v-tabs v-model="tab" align-tabs="center" grow>
                    <v-tab :value="1">
                        课外活动
                        <v-icon icon="mdi-run" color="blue" size="large"></v-icon>
                    </v-tab>
                    <v-tab :value="2">
                        社会实践
                        <v-icon icon="mdi-account-group" color="blue" size="large"></v-icon>
                    </v-tab>
                    <v-tab :value="3">
                        成果奖励
                        <v-icon icon="mdi-trophy-outline" color="blue" size="large"></v-icon>
                    </v-tab>
                </v-tabs>
                <v-window v-model="tab" style="max-height: 80vh; overflow-y: auto;">
                    <v-window-item :value="1">
                        <v-list v-for="item in applicationList1" :key="item.recordId">
                            <v-list-item class="notice-table" :style="{ 'text-align': 'center', color: getStatusColor(item.status) }">
                                您于{{item.time}}发送的{{item.name}}请求被{{item.status == 100? '批准':'驳回'}}了
                            </v-list-item>
                        </v-list>
                    </v-window-item>
                    <v-window-item :value="2">
                        <v-list v-for="item in applicationList2" :key="item.recordId">
                            <v-list-item class="notice-table" :style="{ 'text-align': 'center', color: getStatusColor(item.status) }">
                                您于{{item.time}}发送的{{item.name}}请求被{{item.status == 100? '批准':'驳回'}}了
                            </v-list-item>
                        </v-list>
                    </v-window-item>
                    <v-window-item :value="3">
                        <v-list v-for="item in applicationList3" :key="item.recordId">
                            <v-list-item class="notice-table" :style="{ 'text-align': 'center', color: getStatusColor(item.status) }">
                                您于{{item.time}}发送的{{item.name}}请求被{{item.status == 100? '批准':'驳回'}}了
                            </v-list-item>
                        </v-list>
                    </v-window-item>
                </v-window>
    </v-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { type application } from '@/models/application'
import { GetApplyResult, GetApplyResultId } from '@/controllers/auditController';
import { message } from '@/utils/message';

let applicationList1 = ref([] as application[])
let applicationList2 = ref([] as application[])
let applicationList3 = ref([] as application[])
const tab = ref(null)
let id1:number,id2:number,id3:number

onMounted(() => {
    getApplyResult()
})

async function getApplyResult() {
    try {
        const data = await GetApplyResultId()
        id1 = data.id1
        id2 = data.id2
        id3 = data.id3
        applicationList1.value = await GetApplyResult(id1)
        applicationList2.value = await GetApplyResult(id2)
        applicationList3.value = await GetApplyResult(id3)
    } catch (error:any) {
        message(error.message, 'error')
    }
}
function getStatusColor(status: number): string {
    return status === 100 ? 'green' : 'red';
}
</script>

<style>
.message-card {
    padding: 1%;
    width: 90%;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 1%;
}
.notice-table {
    border: 1px solid #000;
}
</style>